<template>
    <view class="share-modal" v-if="visible" @tap="closeShareModal">
        <view class="share-content" @tap.stop>
            <view class="share-header">
                <text class="share-title">分享方式</text>
                <text class="share-close bigfont big-guanbi" @tap="closeShareModal"></text>
            </view>
            <view class="share-options">
                <view class="share-option" :class="{ active: shareType === 'readonly' }"
                    @tap="selectShareType('readonly')">
                    <view class="share-radio">
                        <view class="radio-inner" v-if="shareType === 'readonly'"></view>
                    </view>
                    <text class="share-icon bigfont big-chakan"></text>
                    <view class="share-option-info">
                        <view class="share-option-main">
                            <text class="share-option-title">仅查看</text>
                            <text class="share-option-desc">他人仅可查看礼簿内容</text>
                        </view>
                    </view>
                </view>
                <view class="share-option" :class="{ active: shareType === 'readwrite' }"
                    @tap="selectShareType('readwrite')">
                    <view class="share-radio">
                        <view class="radio-inner" v-if="shareType === 'readwrite'"></view>
                    </view>
                    <text class="share-icon bigfont big-bianji"></text>
                    <view class="share-option-info">
                        <view class="share-option-main">
                            <text class="share-option-title">可编辑</text>
                            <text class="share-option-desc">他人可查看和编辑礼簿</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="share-number-input">
                <view class="number-field">
                    <text class="number-label">分享人数</text>
                    <view class="number-control">
                        <text class="number-btn" @tap="decreaseNumber">-</text>
                        <input type="number" v-model="shareNumber" class="number-input" />
                        <text class="number-btn" @tap="increaseNumber">+</text>
                    </view>
                </view>
            </view>
            <view class="share-footer">
                <view class="share-btn" @tap="showQrCode">生成二维码</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { saveShare } from '@/api/share';
import { ref } from 'vue';
import QRCode from 'weapp-qrcode';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    bookId: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['update:visible', 'qrcode', 'close']);

const shareType = ref('readonly');
const shareNumber = ref('1');
const qrCodePath = ref('');

const selectShareType = (type) => {
    shareType.value = type;
};

const increaseNumber = () => {
    const num = parseInt(shareNumber.value) || 0;
    shareNumber.value = String(num + 1);
};

const decreaseNumber = () => {
    const num = parseInt(shareNumber.value) || 0;
    if (num > 1) {
        shareNumber.value = String(num - 1);
    }
};

const preventBubble = (e) => {
    e.stopPropagation();
};

const closeShareModal = () => {
    emit('update:visible', false);
    emit('close');
};



const showQrCode = async () => {
    if (!shareNumber.value || parseInt(shareNumber.value) < 1) {
        shareNumber.value = '1';
    }

    try {
        const token = uni.getStorageSync('token');
        if (!token) {
            uni.showToast({
                title: '请先登录',
                icon: 'none'
            });
            return;
        }

        // 先保存分享记录
        let result = await saveShare({
            bookId: props.bookId,
            type: shareType.value,
            shareCount: parseInt(shareNumber.value),
            shareUserId: token
        });
        console.log(result);

        const qrContent = `${result.data}`;

        const qrCodeUrl = await new Promise((resolve, reject) => {
            new QRCode({
                width: 400,
                height: 400,
                canvasId: 'qrcode',
                text: qrContent,
                foreground: '#000000',
                background: '#ffffff',
                padding: 20,
                callback: (res) => {
                    uni.canvasToTempFilePath({
                        canvasId: 'qrcode',
                        width: 400,
                        height: 400,
                        destWidth: 800,
                        destHeight: 800,
                        success: (res) => {
                            resolve(res.tempFilePath);
                        },
                        fail: (err) => {
                            reject(err);
                        }
                    });
                }
            });
        });

        qrCodePath.value = qrCodeUrl;
        emit('qrcode', qrCodeUrl);
        closeShareModal();
    } catch (error) {
        uni.showToast({
            title: '生成二维码失败',
            icon: 'none'
        });
    }
};

</script>

<style scoped>
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.share-content {
    width: 100%;
    background: var(--theme-card);
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    padding: bottom 0, im !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.share-header {
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid var(--theme-primary-border);
}

.share-title {
    font-size: 32rpx;
    font-weight: 600;
    color: var(--theme-text);
}

.share-close {
    font-size: 48rpx;
    color: var(--theme-text-light);
    padding: 0 20rpx;
}

.share-options {
    padding: 24rpx 32rpx;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    background: rgba(91, 158, 231, 0.04);
    transition: all 0.3s ease;
    border: 2rpx solid transparent;
}

.share-option.active {
    background: rgba(91, 158, 231, 0.08);
    border-color: rgba(91, 158, 231, 0.15);
}

.share-radio {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 2rpx solid var(--theme-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.share-option.active .share-radio {
    border-color: var(--theme-primary);
}

.radio-inner {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: var(--theme-primary);
}

.share-icon {
    font-size: 40rpx;
    color: var(--theme-primary);
}

.share-option-info {
    flex: 1;
}

.share-option-title {
    font-size: 32rpx;
    font-weight: 500;
    color: var(--theme-text);
    margin-bottom: 4rpx;
}

.share-option-desc {
    font-size: 24rpx;
    color: var(--theme-text-secondary);
}

.share-number-input {
    padding: 16rpx 32rpx;
    border-top: 1rpx solid var(--theme-primary-border);
}

.number-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.number-label {
    font-size: 28rpx;
    color: var(--theme-text);
}

.number-control {
    display: flex;
    align-items: center;
    background: rgba(91, 158, 231, 0.04);
    border-radius: 8rpx;
    border: 2rpx solid rgba(91, 158, 231, 0.15);
    overflow: hidden;
}

.number-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: var(--theme-text);
    background: transparent;
}

.number-btn:active {
    background: var(--theme-primary-light);
}

.number-input {
    width: 100rpx;
    height: 72rpx;
    text-align: center;
    font-size: 28rpx;
    color: var(--theme-text);
    border-left: 2rpx solid rgba(91, 158, 231, 0.15);
    border-right: 2rpx solid rgba(91, 158, 231, 0.15);
    background: transparent;
}

.share-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid var(--theme-primary-border);
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.share-btn {
    height: 88rpx;
    background: var(--theme-gradient);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
}

.share-friend-btn {
    background: var(--theme-primary);
}

.share-btn:active {
    opacity: 0.9;
}

/* 暗黑模式适配 */
.dark-mode .share-content {
    background: var(--theme-card);
}

.dark-mode .share-header {
    border-color: var(--theme-primary-border);
}

.dark-mode .share-option {
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .share-option.active {
    background: rgba(91, 158, 231, 0.12);
    border-color: rgba(91, 158, 231, 0.2);
}

.dark-mode .number-control {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .number-btn {
    background: var(--theme-card);
}

.dark-mode .number-input {
    border-color: rgba(255, 255, 255, 0.1);
}
</style>